<template>
	<view class="com-card" :style="{'background-color': bgColor, 'border-radius': borderRadius + 'rpx'}" v-if="isShow">
		<view class="y-flex y-row y-align-center pb-20 mb-30 border-bottom-1 border-bottom-style-dashed"
		:style="{'border-bottom-color': skinColor.color_gap_1}" v-if="cardTitle || cardIcon">
			<com-logo v-if="cardIcon" class="mr-10" size="50" :src="cardIcon" :color="cardIconColor"></com-logo>
			<view class="y-flex y-flex-1 y-row y-align-center">
				<text class="fs-35 fw-bold" :style="{color: moduleTitleColor}">{{cardTitle}}</text>
				<text class="fs-24 fw-bold ml-20" :style="{color: textColor}">{{cardDescription}}</text>
			</view>
			<view class="y-flex y-row y-align-center" v-if="moreText" @tap="handleMoreTap">
				<text class="fs-24" :style="{color: textColor}">{{moreText}}</text>
				<com-icon name="right" size="18" :color="textColor"></com-icon>
			</view>
			<view class="y-flex y-row y-align-center" v-if="enableRefresh && !moreText && data.length > cellCount" @tap="handleRefresh">
				<com-icon name="refresh" :color="moduleTitleColor" size="30"></com-icon>
				<text class="fs-24 ml-5" :style="{color: moduleTitleColor}">换一组</text>
			</view>
		</view>
		<scroll-view class="tabs-scroll mb-30" scroll-x="true" :show-scrollbar="false" v-if="subsection.length > 0">
			<view class="tabs y-flex y-row y-align-center" :class="{'y-flex-1': subsectionColumn != 'auto'}">
				<view class="y-flex tab pl-30 pr-30 pt-15 pb-15 border-radius-10 y-align-center"
				:class="{'mr-20': i < subsection.length - 1, 'y-flex-1': subsectionColumn != 'auto'}"
				:style="{'background-color': i == subsectionCurrent ? subsectionSelectedColor : tabBgColor}" v-for="(tab, i) in subsection" :key="i"
				@tap="subsectionCurrent = i">
					<text class="fs-26" :style="{color: i == subsectionCurrent ? tabBgColor : tabTextColor}">{{tab}}</text>
				</view>
			</view>
		</scroll-view>
		<template v-if="enableTopCard && listTop">
			<component class="mb-30" :is="'find-' + topCellName" :options="listTopOption" :item="listTop" :index="0"></component>
		</template>
		<scroll-view class="y-flex y-row" :show-scrollbar="false" scroll-x v-if="enableScroll">
			<com-grid :data="listSync" :column="typeof cellColumn == 'number' ? cellColumn : listSync.length" :count="cellCount">
				<template v-slot="{item, index}">
					<component :is="'find-' + cellName" :options="options" :item="item" :index="enableTopCard ? index + 1 : index" class="mr-20" :style="{'width': cellScrollWidth}"></component>
				</template>
			</com-grid>
		</scroll-view>
		<template v-else>
			<view class="y-flex y-row y-align-center y-wrap" v-if="cellColumn == 'auto'">
				<component class="mr-20 mb-20" v-for="(item, index) in listSync" :key="index"
				:is="'find-' + cellName" :options="options" :item="item" :index="enableTopCard ? index + 1 : index" :style="{'width': cellAutoWidth}"></component>
			</view>
			<com-grid :data="listSync" :column="cellColumn" :count="cellCount" v-else>
				<template v-slot="{item, index}">
					<component :is="'find-' + cellName" :options="options" :item="item" :index="enableTopCard ? index + 1 : index"></component>
				</template>
			</com-grid>
		</template>
		<view class="y-flex y-row y-align-center y-justify-center mt-20" v-if="enableRefresh && (moreText || !cardTitle && !cardIcon) && data.length > cellCount" @tap="handleRefresh">
			<com-icon name="refresh" :color="moduleTitleColor" size="32"></com-icon>
			<text class="fs-28 ml-10" :style="{color: moduleTitleColor}">换一组</text>
		</view>
	</view>
</template>

<script>
	import FindHCell from '../FindCell/HCell.vue'
	import FindVCell from '../FindCell/VCell.vue'
	import FindImgCell from '../FindCell/ImgCell.vue'
	import FindTextCell from '../FindCell/TextCell.vue'
	import FindTagCell from '../FindCell/TagCell.vue'
	import FindACell from '../FindCell/ACell.vue'
	import FindTCell from '../FindCell/TCell.vue'
	import FindCCell from '../FindCell/CCell.vue'
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		components: {
			FindHCell,
			FindVCell,
			FindImgCell,
			FindTextCell,
			FindTagCell,
			FindACell,
			FindTCell,
			FindCCell
		},
		inject: ['getSkinColor', 'navigate'],
		props: {
			data: {
				type: [Object, Array],
				default () {
					return new Array
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			pixelunit () {
				return pixelunit
			},
			isShow () {
				return Object.prototype.toString.call(this.data) == '[object Object]' || (Object.prototype.toString.call(this.data) == '[object Array]' && this.data.length > 0)
			},
			skinColor () {
				return this.getSkinColor()
			},
			//分段列表
			subsection () {
				return Object.prototype.toString.call(this.data) == '[object Object]' ? (this.data.subsection || []) : []
			},
			//数据列表
			list () {
				return Object.prototype.toString.call(this.data) == '[object Object]' ? (this.data?.list[this.subsectionCurrent] || []) : this.data
			},
			//卡片标题
			cardTitle () {
				return this.options.cardTitle || ''
			},
			//卡片图标
			cardIcon () {
				return this.options.cardIcon || ''
			},
			//卡片图标颜色
			cardIconColor () {
				return this.options.cardIconColor || this.options.themeColor || '#333333'
			},
			//卡片介绍
			cardDescription () {
				return this.options.cardDescription || ''
			},
			//是否展示刷新按钮
			enableRefresh () {
				return this.options.enableRefresh || false
			},
			//是否开启横向滚动
			enableScroll () {
				return this.options.enableScroll || false
			},
			//开启顶部卡片展示
			enableTopCard () {
				return this.options.enableTopCard || false
			},
			//单元格名称
			cellName () {
				return this.options.cellName || 'v-cell'
			},
			//顶部单元格名称
			topCellName () {
				return this.options.topCellName || this.cellName
			},
			//更多按钮文本不传入则不显示更多按钮
			moreText () {
				return this.options.moreText || ''
			},
			//更多按钮跳转
			moreUrl () {
				return this.options.moreUrl || ''
			},
			//滚动时单元格宽度
			cellScrollWidth () {
				return this.options.cellWidth == 'auto' ? this.options.cellWidth : pixelunit(this.options.cellWidth || 300)
			},
			//column为auto时单元格宽度
			cellAutoWidth () {
				return typeof this.options.cellWidth == 'number' ? pixelunit(this.options.cellWidth) : 'auto'
			},
			//单元格列数
			cellColumn () {
				return this.options.cellColumn || 3
			},
			//单元格展示最大数量 当开启刷新按钮时表现为每组最大展示数量
			cellCount () {
				return this.options.cellCount || (this.enableRefresh ? 6 : 'auto')
			},
			//圆角
			borderRadius () {
				return this.options.borderRadius
			},
			//选项栏选中颜色
			subsectionSelectedColor () {
				return this.options.subsectionSelectedColor || this.options.themeColor || this.skinColor.color_blue
			},
			//选项栏列数
			subsectionColumn () {
				return this.options.subsectionColumn || 'auto'
			},
			titleColor () {
				return this.skinColor.color_1
			},
			moduleTitleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			tabBgColor () {
				return this.skinColor.color_gap_2
			},
			tabTextColor () {
				return this.skinColor.color_2
			},
			//滚动列表图片样式
			listTopOption () {
				return {
					enableScroll: false,
					cellImageWidth: this.options.topCellImageWidth || this.options.cellImageWidth,
					cellImageHeight: this.options.topCellImageHeight || this.options.cellImageHeight,
					cellImageBorderRadius: this.options.topCellImageBorderRadius || this.options.cellImageBorderRadius,
					cellImageTipSize: this.options.topCellImageTipSize || this.options.cellImageTipSize,
					cellTitleLines: this.options.topCellTitleLines || this.options.cellTitleLines,
					cellDescriptionLines: this.options.topCellDescriptionLines || this.options.cellDescriptionLines
				}
			},
			listSync () {
				const len = this.enableTopCard ? 1 : 0
				const start = typeof this.cellCount == 'number' ? (this.groupCurrent * this.cellCount) + len : len//截取数据开始位置
				const end = typeof this.cellCount == 'number' ? ((this.groupCurrent + 1) * this.cellCount) + len : this.list.length//截取数据结束位置
				return this.list.slice(start, end)
			},
			listTop () {
				return this.list.length > 0 ? this.list[0] : ''
			},
			//分组数量
			groupCount () {
				return Math.ceil(this.list.length / this.cellCount)
			}
		},
		data () {
			return {
				//分段索引
				subsectionCurrent: 0,
				//分组索引
				groupCurrent: 0
			}
		},
		methods: {
			//换组
			handleRefresh () {
				if ( this.groupCurrent + 1 > (this.groupCount - 1) ) this.groupCurrent = 0
				else this.groupCurrent++
			},
			handleMoreTap () {
				this.navigate(this.options.moreUrl)
			}
		}
	}
</script>

<style>
	.com-card {
		padding: 30rpx;
	}
	.tabs-scroll {
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		overflow: hidden;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		align-items: center;
		/* #endif */
	}
</style>